<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<script type="text/javascript">
    var currentSeq = null;
    var inactiveImgFlag = "_tint.";
    var NEXT_BUTTON_ID = "nextBtn";
    var PREVIOUS_BUTTON_ID = "previousBtn";

    function readQsBySeq(seq) {
        var qsId = $("[sequence=" + seq + "]:first").attr("qsId");

        if (qsId != undefined) {
            $.get("poe.html", {qsId : qsId}, function(data) {
                $("#previewContent").html(data);
            });
        }
    }

    function readQsByClickTitle(seq) {
        readQsBySeq(seq);

        $("li[name^=qsTitle]").removeClass("active");
        $("[name=qsTitle" + seq + "]").addClass("active");

        if (seq > currentSeq) {
            // If the current qs is the last one, disabled the next button.
            var nextSeq = seq + 1;
            var nextQsid = $("[sequence=" + nextSeq + "]:first").attr("qsId");
            if (nextQsid == undefined) {
                Dialogs.inactiveBtn($("#" + NEXT_BUTTON_ID), inactiveImgFlag);
            }
            activeBtn($("#" + PREVIOUS_BUTTON_ID));
        }

        if (seq < currentSeq) {
            // If the current qs is the first one, disabled the previous button.
            var prevSeq = seq - 1;
            var prevQsid = $("[sequence=" + prevSeq + "]:first").attr("qsId");
            if (prevQsid == undefined) {
                Dialogs.inactiveBtn($("#" + PREVIOUS_BUTTON_ID), inactiveImgFlag);
            }
            activeBtn($("#" + NEXT_BUTTON_ID));
        }

        currentSeq = seq;
    }

    function nextQs() {
        readQsBySeq(++currentSeq);

        // If the current qs is the last one, disabled the next button.
        var nextSeq = currentSeq + 1;
        var nextQsid = $("[sequence=" + nextSeq + "]:first").attr("qsId");
        if (nextQsid == undefined) {
            $("#nextBtn").attr("disabled", true);
            Dialogs.inactiveBtn($("#nextBtn"), inactiveImgFlag);
        }

        $("li[name^=qsTitle]").removeClass("active");
        $("[name=qsTitle" + currentSeq + "]").addClass("active");

        // Enable the previous button.
        activeBtn($("#" + PREVIOUS_BUTTON_ID));
    }

    function previousQs() {
        readQsBySeq(--currentSeq);

        // If the current qs is the first one, disabled the previous button.
        var prevSeq = currentSeq - 1;
        var prevQsid = $("[sequence=" + prevSeq + "]:first").attr("qsId");
        if (prevQsid == undefined) {
            Dialogs.inactiveBtn($("#previousBtn"), inactiveImgFlag);
        }

        $("li[name^=qsTitle]").removeClass("active");
        $("[name=qsTitle" + currentSeq + "]").addClass("active");

        // Enable the next button.
        activeBtn($("#" + NEXT_BUTTON_ID));
    }

    function activeBtn(btn) {
        btn.removeAttr("disabled");
        var imgSrc = btn.attr("src");
        var imgSrc = imgSrc.replace(inactiveImgFlag, ".");
        btn.attr("src", imgSrc);
    }

    $(document).ready(function() {
        $("#previewCloseBtn").click(function() {
            $("#preview").hide();
        });

        $("#previewDoneBtn").click(function() {
            $("#preview").hide();
        });

        $("#nextBtn").click(function () {
            nextQs();
        });

        $("#previousBtn").click(function () {
            previousQs();
        });

        $("#previewContent").height(window.screen.height - 320);
    });
</script>

<style type="text/css" rel="stylesheet">
    #preview {
        display: none;
        position: absolute;
        top: 50px;
        z-index: 999;
        width: 1000px;
    }

    #previewBody {
        margin: 0px auto 0px auto;
        width: 900px;
    }
</style>

<!-- Begin: Preview Question Set -->
<div id="preview">
    <!--START: popup -->
    <div id="previewBody" class="popup">
        <div class="popup_top">
            <span>
                <input type="image" id="previewCloseBtn" src="<%=request.getContextPath()%>/images/icon/close.gif"
                       class="close" alt="close"/>
            </span>
        </div>

        <div class="popup_insider">
            <ul class="page">
                <li class="previous">
                    <input type="image" id="previousBtn" src="<%=request.getContextPath()%>/images/btn/btn_previous.gif"
                           alt="previous" class="btn" style="float:left;"/>
                </li>
                <li class="next">
                    <input type="image" id="nextBtn" src="<%=request.getContextPath()%>/images/btn/btn_next.gif"
                           alt="view" class="btn"/>
                </li>
            </ul>

            <div id="previewContent" class="scrollbar application"></div>

            <ul id="titleList" class="sidebar">

            </ul>

            <div class="popup_submit">
                <input type="image" id="previewDoneBtn" src="<%=request.getContextPath()%>/images/btn/btn_done.gif"
                       alt="done" class="btn"/>
            </div>
        </div>

        <div class="popup_bottom"><span></span></div>
    </div>
</div>
<!-- End -->